$(function () {
    var temp = location.search.substring(1);
    var arr = temp.split('&');
    // 再把arr里面的数据以 = 分割
    var params = {}
    arr.forEach(el => {
        var result = el.split('=') //result[0] --> key
        console.log(result);
        params[result[0]] = result[1];
    })
    var id = params.id;
    // -----------------------------
    let mkb = $('.mkb');
    let dj_info_title = $('.dj_info_title');
    let user_ifn = $('.user_ifn');
    let collection = $('.collection');
    let share = $('.share');
    let pl_btn = $('.pl_btn');
    let tagsLi = $(`.tagsLi`);
    let album_desc = $(`.album_desc`);
    let songtb_title = $(`.n-songtb_title`);
    let songList_table_li = $(`.songList_table tbody`);
    let songNum = $('.songNum');
    ajax(id)

    function ajax(id) {
        $.ajax({
            url: 'http://localhost:3000/playlist/detail',
            data: {
                id: id
            },
            success: function (res) {
                mkb.html('');
                user_ifn.html('');
                collection.html('');
                share.html('');
                pl_btn.html('');
                tagsLi.html('');
                songtb_title.html('');
                songList_table_li.html('');
                songNum.html('');
                mkb.append(`<img src="${res.playlist.coverImgUrl}" alt="">`)
                dj_info_title.append(`<h2>${res.playlist.name}</h2>`);

                user_ifn.append(`<div class="user_h_img">
                <a href="#">
                    <img src="${res.playlist.creator.avatarUrl}" alt="">
                </a>
            </div>
            <a href="#" class="user_name">${res.playlist.creator.nickname}</a>
            <p class="created_time">${getTime(res.playlist.createTime)} 创建</p>`)
                let user_name = $('.user_name');
                if (res.playlist.creator.avatarDetail !== null) {
                    user_name.append(`<img src="${res.playlist.creator.avatarDetail.identityIconUrl}">`)
                }
                let subscribedCount = 0
                if (res.playlist.subscribedCount > 100000) {
                    subscribedCount = (res.playlist.subscribedCount / 10000).toFixed(0) + "万"
                } else {
                    subscribedCount = res.playlist.subscribedCount
                }
                collection.append(`<span class="btn2">(${subscribedCount})</span>`)
                let shareCount = 0;
                if (res.playlist.shareCount > 100000) {
                    shareCount = (res.playlist.shareCount / 10000).toFixed(0) + "万"
                } else {
                    shareCount = res.playlist.shareCount
                }
                share.append(`<span class="btn2">(${shareCount})</span>`)
                let pl_btnCount = 0;
                if (res.playlist.commentCount > 100000) {
                    pl_btnCount = (res.playlist.commentCount / 10000).toFixed(0) + "万"
                } else {
                    pl_btnCount = res.playlist.commentCount
                }
                pl_btn.append(`<span class="btn2">(${pl_btnCount})</span>`)

                res.playlist.tags.forEach((el) => {
                    tagsLi.append(` <a href="#" class="btn2">
                        <span class="btn2">${el}</span>
                    </a>`)
                })
                let description = res.playlist.description.split("\n")
                console.log(description);
                description.forEach(el => {
                    album_desc.append(` <span>${el}</span><br>`);
                })
                songtb_title.append(`<h3>歌曲列表</h3>
                <span class="songNum">${res.playlist.trackCount}首歌</span>
                <div class="playNum">播放：<span>${res.playlist.playCount}</span>次</div>
                <div class="out_link">
                    <i></i>
                    <a href="#" class="out-link">生成外链播放器</a>
                </div>`)
                console.log(res);
                res.playlist.tracks.forEach((e, index) => {
                    let stime = e.dt;
                    let stime_m = Math.floor(stime / 1000 / 60);
                    let stime_s = (stime / 1000) - (stime_m * 60).toFixed(0);
                    stime_s = parseInt(stime_s.toFixed(0));
                    stime_m = stime_m < 10 ? '0' + stime_m : stime_m;
                    stime_s = stime_s < 10 ? '0' + stime_s : stime_s;
                    let dt = `${stime_m}:${stime_s}`

                    songList_table_li.append(`<tr class="even">
                    <td class="left_num">
                        <div class="left_hd">
                            <span class="nth_num">${index+1}</span>
                            <span class="ply_img"></span>
                        </div>
                    </td>
                    <td class="songName_wrap">
                        <div class="songName_div">
                            <a href="../../views/songDetail.html?id=${e.id}" class="f-thide">${e.name}</a>
                            <span class='mv' data-mvnum="${e.mv}"></span>
                        </div>
                    </td>
                    <td class="musicTime">
                        <span class="shic">${dt}</span>
                        <div class="hic hshow">
                            <a href="" class="icn-add"></a>
                            <a href="" class="icn icn-fav"></a>
                            <a href="" class="icn icn-share"></a>
                            <a href="" class="icn icn-dl"></a>
                        </div>
                    </td>
                    <td class="songSinger-wrap">
                        <div class="songSinger">
                            <a href="#" class="f-thide"><span>${e.ar[0].name}</span></a>
                        </div>
                    </td>
                    <td class="zj_wrap">
                        <div class="zj">
                            <a href="#" class="f-thide">${e.al.name}</a>
                        </div>
                    </td>
                </tr>`)

                })

                let mv = $('.mv')
                for (let i = 0; i < mv.length; i++) {
                    if (mv[i].dataset.mvnum == 0) {
                        mv[i].classList.add('hide')
                    }
                }

                let tbodyTr = document.querySelectorAll(`tbody tr`)
                tbodyTr.forEach((el, index) => {
                    if (index % 2 == 1) {
                        el.classList.remove('even')
                    }
                })
                songNum.append(`共${pl_btnCount}条评论`)

            }
        })
    }

    function getTime(createTime) {
        var date = new Date(createTime);
        date.setHours(date.getHours() + 8);
        return date.toJSON().replace('T', ' ').substring(0, 10);
    };

    // 评论
    let txtarea = $('.comment_area textarea');
    txtarea.on('keydown', (e) => {
        if (e.code != "Backspace") {
            if ($(`#counter`).html() == 0) {
                txtarea.prop('maxlength', '140')
                alert('只能输140个字')
            }
            countChar("status", "counter")
        } else {
            countChar("status", "counter")
        }
    });
    txtarea.on('keyup', (e) => {
        if (e.code != "Backspace") {
            if ($(`#counter`).html() == 0) {
                txtarea.prop('maxlength', '140')
                alert('只能输140个字')
            }
            countChar("status", "counter")
        } else {
            countChar("status", "counter")
        }
    });

    let submitBtn = $('.user_comments_bottom a');
    submitBtn.on('click', function () {
        console.log(submitBtn);
    })

    function countChar(textareaName, spanName) {
        document.getElementById(spanName).innerHTML = 140 - document.getElementById(textareaName).value.length;

    }


})